<script setup lang="ts">
import {User} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

import router from "@/router";
import {onMounted, reactive, computed} from "vue";


const logout = () => {

  router.push('/');
}
const updatePassword = () => {
  ElMessage.success("修改成功")
}

const results = reactive({
  location: {
    id: '',
    name: '',
    country: '',
    path: '',
    timezone: '',
    timezone_offset: ''
  },
  daily: [
    {
      date: '',
      text_day: '',
      code_day: '',
      text_night: '',
      code_night: '',
      high: '',
      low: '',
      rainfall: '',
      precip: '',
      wind_direction: '',
      wind_direction_degree: '',
      wind_speed: '',
      wind_scale: '',
      humidity: ''
    }
  ]
});

const getWeather = async () => {
  try {
    const response = await fetch('https://api.seniverse.com/v3/weather/daily.json?key=Se8ZKxm3JT9A0LhA5&location=meishan&language=zh-Hans&days=1');
    const data = await response.json();

    // 确保API返回了预期的数据结构
    if (data.results && data.results.length > 0) {
      const apiResult = data.results[0];

      // 赋值location
      results.location.id = apiResult.location.id;
      results.location.name = apiResult.location.name;
      results.location.country = apiResult.location.country;
      results.location.path = apiResult.location.path;
      results.location.timezone = apiResult.location.timezone;
      results.location.timezone_offset = apiResult.location.timezone_offset;

      // 赋值daily，由于API返回的daily是一个数组，这里直接取第一个元素
      const dailyData = apiResult.daily[0];
      results.daily[0].date = dailyData.date;
      results.daily[0].text_day = dailyData.text_day;
      results.daily[0].code_day = dailyData.code_day;
      results.daily[0].text_night = dailyData.text_night;
      results.daily[0].code_night = dailyData.code_night;
      results.daily[0].high = dailyData.high;
      results.daily[0].low = dailyData.low;
      results.daily[0].rainfall = dailyData.rainfall;
      results.daily[0].precip = dailyData.precip;
      results.daily[0].wind_direction = dailyData.wind_direction;
      results.daily[0].wind_direction_degree = dailyData.wind_direction_degree;
      results.daily[0].wind_speed = dailyData.wind_speed;
      results.daily[0].wind_scale = dailyData.wind_scale;
      results.daily[0].humidity = dailyData.humidity;
    }
  } catch (error) {
    console.error('获取天气信息时出错:', error);
  }
};


// 天气模块
const locationName = computed(() => results.location.name || '');
const dailyWeatherText = computed(() => results.daily[0]?.text_day || '');
const dailyTemperatureRange = computed(() => {
  const {low, high} = results.daily[0] || {};
  return `${low}-${high}`;
});

// 调用函数
onMounted(() => {
  getWeather();
});


</script>

<template>
  <div>
    <div class="logo">
      <span class="logo-span" style="margin-top: 10px;">社区后台</span>
    </div>

    <div class="user-avatar" style="text-align: center">
      <div class="weather-module" v-if="results && results.daily && results.daily.length">
        <div class="location">{{ locationName }}</div>
        <div class="weather-description">{{ dailyWeatherText }}</div>
        <div class="temperature-range">{{ dailyTemperatureRange }}</div>
      </div>
      <el-dropdown>
        <el-avatar shape="square">
          <el-icon size="40px">
            <user/>
          </el-icon>
        </el-avatar>
        <template #dropdown>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>

      </el-dropdown>
    </div>

  </div>
</template>


<style lang="css" scoped>
.weather-module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 30px;

  .location {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .weather-description {
    font-size: 16px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .temperature-range {
    font-size: 18px;
    color: #007bff;
  }
}

.logo {
  float: left;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #79bbff;
  border-radius: 8px 8px 8px 8px;
  box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.1);
}

.logo-span {
  display: flex;
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 10px 20px;
}
.logo:hover {
  background-color: #0056b3;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.user-avatar {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: 25px;
  margin-right: 40px;
}

</style>

